<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>p2p网贷平台</title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link href="css/common.css" rel="stylesheet"/>
    <link href="css/register.css" rel="stylesheet" type="text/css">
    <script src="script/jquery.min.js" type="text/javascript"></script>
    <script src="script/common.js" type="text/javascript"></script>
    <!--    <script src="script/login.js" type="text/javascript"></script>-->
    <script th:src="@{/layui/layer/layer.js}" type="text/javascript"></script>
</head>
<body>
<div th:replace="common/public::head"></div>
<!--注册-->
<div class="wrap">
    <div class="tdbModule register">
        <div class="registerTitle">注册账户</div>
        <div class="registerLc1">
            <p class="p1">填写账户信息</p>
            <p class="p2">验证手机信息</p>
            <p class="p3">注册成功</p>
        </div>
        <div class="registerCont">
            <ul>
                <li>
                    <span class="dis">用户名:</span>
                    <input class="input _userName" id="userName" maxlength="14" name="name" placeholder="请输入用户名" tabindex="1" type="text">
                    <span data-info="6-14个字符，字母开头，字母、数字下划线组成" id="userNameAlt">6-14个字符，字母开头，字母、数字下划线组成</span>
                </li>
                <li>
                    <span class="dis">密码:</span>
                    <input class="input _password" id="password" maxlength="12" name="user.password" placeholder="请输入登录密码" tabindex="1" type="password">
                    <span data-info="6-12个字符，英文、数字组成，区分大小写" id="passwordAlt">6-12个字符，英文、数字组成，区分大小写</span>
                </li>
                <li>
                    <span class="dis">确认密码:</span>
                    <input class="input _repeatPassword" id="repeatPassword" maxlength="12" name="repeatPassword" placeholder="请输入确认密码" tabindex="1"
                           type="password">
                    <span data-info="请再次输入密码" id="repeatPasswordAlt">请再次输入密码</span>
                </li>
                <li>
                    <span class="dis">邮箱:</span>
                    <input class="input _userEmail" id="userEmail" maxlength="24" name="email" placeholder="请输入邮箱" tabindex="1" type="text">
                    <span data-info="请输入正确的邮箱格式" id="userEmailAlt">请输入正确的邮箱格式</span>
                </li>
                <li>
                    <span class="dis">验证码:</span>
                    <input class="input input1 _yanzhengma" id="jpgVerify" maxlength="4" name="yzm" placeholder="请输入图形验证码" tabindex="1" type="text">
                    <img alt="验证码" class="valign" id="img" onclick="changeImg();" style="cursor:pointer;">
                    <a class="look blue _changeCapcherButton" href="javascript:void(0);" id="look" onclick="changeImg();">看不清？换一张</a>
                    <span class="info" data-info="请输入图形验证码" id="jpgVerifys"></span>
                </li>
                <li class="telNumber">
                    <span class="dis">手机号码:</span>
                    <input class="input _phoneNum" id="phone" maxlength="11" name="phone" onkeyup="value=value.replace(/[^\d\.]/g,'')" placeholder="请输入手机号码"
                           tabindex="1" type="text">
                    <a class="button radius1 _getkey" href="#" id="sendPhone" onclick="hqsjyzm()">获取验证码</a>
                    <span data-info="请输入您的常用电话" id="phoneJy">请输入您的常用电话</span>
                </li>
                <li class="telNumber">
                    <span class="dis">短信验证码:</span>
                    <input class="input input1  _phonVerify" data-_id="phonVerify" id="phonVerify" maxlength="6" onkeyup="value=value.replace(/[^\d\.]/g,'')"
                           placeholder="请输入短信验证码" tabindex="1" type="text">
                    <span class="info" data-info="请输入手机验证码" id="phonVerifys">请输入手机验证码</span>
                </li>
                <li>
                    <span class="dis">推 荐 人:</span>
                    <input class="input input1 _invist" id="tname" placeholder="选填" type="text">
                    <span class="_invist_msg" id="tnameAlt">请填写推荐人账户名，如无推荐人请留空</span>
                </li>
                <li class="agree">
                    <input checked="checked" id="protocol" name="protocol" type="checkbox" value="">
                    我同意并接收<a href="#" target="_black">《亿人宝注册协议》</a>
                    <span data-info="请查看协议" id="protocolAlt">请查看协议</span>
                </li>
                <li class="btn">
                    <a class="radius1 _ajaxSubmit" href="javascript:void(0);" onclick="add()">下一步</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--网站底部-->
<div class="ft" id="footer">
    <div th:replace="common/public::footer"></div>
</div>
<script type="text/javascript">
    function changeImg() {
        $("#img").attr("src", "/erb/user/image?date=" + new Date().getTime());
    }

    //初始化时调用一下
    changeImg();

    //禁用获取短信验证码按钮
    let $sendPhone = $("#sendPhone");
    $sendPhone.attr("disabled", true).css("pointer-events", "none");
    $sendPhone.css("background", "lightgray");

    //用户名验证
    var namebln = false;
    let $userName = $("#userName");
    $userName.blur(function () {
        var userName = $userName.val().trim();
        let $userNameAlt = $("#userNameAlt");
        if (userName == "" || userName == null) {
            $userNameAlt.text("");
            $userNameAlt.append("<span style='color:#ff7800'>用户名不能为空</span>");
            namebln = false;
        } else if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(userName)) {
            $userNameAlt.text("");
            $userNameAlt.append("<span style='color:#ff7800'>用户名只能以字母开头，且只能由字母、数字、下划线组成</span>");
            namebln = false;
        } else if (userName.length < 6 || userName.length > 14) {
            $userNameAlt.text("");
            $userNameAlt.append("<span style='color:#ff7800'>用户名为6-14为字符</span>");
            namebln = false;
        } else {
            $.ajax({
                url: '[[@{/user/seluser}]]',
                type: 'post',
                async: false,
                data: {name: userName},
                dataType: 'json',
                success: function (data) {
                    if (data == 1) {
                        $userNameAlt.text("");
                        $userNameAlt.append("<span style=color:#ff7800>用户名已存在</span>");
                        namebln = false;
                    } else if (data == 0) {
                        $userNameAlt.text("");
                        $userNameAlt.append("<span style=color:green>用户名可用</span>");
                        namebln = true;
                    }
                }
            });
        }
    });
    //登录密码验证
    var passbln = false;
    let $password = $("#password");
    $password.blur(function () {
        var password = $password.val().trim();
        let $passwordAlt = $("#passwordAlt");
        if (password == "" || password == null) {
            $passwordAlt.text("");
            $passwordAlt.append("<span style='color:#ff7800'>密码不能为空</span>");
            passbln = false;
        } else if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(password)) {
            $passwordAlt.text("");
            $passwordAlt.append("<span style='color:#ff7800'>密码只能以字母开头，且由字母、数字组成</span>");
            passbln = false;
        } else if (password.length < 6 || password.length > 12) {
            $passwordAlt.text("");
            $passwordAlt.append("<span style='color:#ff7800'>密码为6-12位字符</span>");
            passbln = false;
        } else {
            $passwordAlt.text("");
            $passwordAlt.append("<span style='color:green'>密码可用</span>");
            passbln = true;
        }
    });
    //确认密码验证
    var spassbln = false;
    let $repeatPassword = $("#repeatPassword");
    $repeatPassword.blur(function () {
        var repeatPassword = $repeatPassword.val().trim();
        var password = $("#password").val().trim();
        let $repeatPasswordAlt = $("#repeatPasswordAlt");
        if (repeatPassword == "" || repeatPassword == null) {
            $repeatPasswordAlt.text("");
            $repeatPasswordAlt.append("<span style='color:#ff7800'>确认密码不能为空</span>");
            spassbln = false;
        } else if (repeatPassword != password) {
            $repeatPasswordAlt.text("");
            $repeatPasswordAlt.append("<span style='color:#ff7800'>两次密码输入不一致</span>");
            spassbln = false;
        } else if (repeatPassword == password) {
            $repeatPasswordAlt.text("");
            $repeatPasswordAlt.append("<span style='color:green'>密码输入一致</span>");
            spassbln = true;
        }
    });
    //验证邮箱
    var emailbln = false;
    $("#userEmail").blur(function () {
        var email = $("#userEmail").val().trim();
        var atpos = email.indexOf("@");
        var dotpos = email.lastIndexOf(".");
        if (email == "" || email == null) {
            $("#userEmailAlt").text("");
            $("#userEmailAlt").append("<span style=color:#ff7800>邮箱不能为空</span>");
            emailbln = false;
        } else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
            $("#userEmailAlt").text("");
            $("#userEmailAlt").append("<span style=color:#ff7800>不是一个有效的邮箱地址</span>");
            emailbln = false;
        } else {
            $.ajax({
                url: '[[@{/user/seluser}]]',
                type: 'post',
                async: false,
                data: {email: email},
                dataType: 'json',
                success: function (data) {
                    if (data == 1) {
                        $("#userEmailAlt").text("");
                        $("#userEmailAlt").append("<span style=color:#ff7800>邮箱已注册，换一个吧！</span>");
                        emailbln = false;
                    } else if (data == 0) {
                        $("#userEmailAlt").text("");
                        $("#userEmailAlt").append("<span style=color:green>邮箱可用</span>");
                        emailbln = true;
                    }
                }
            });
        }
    });
    //验证图形验证码
    var txyzbln = false;
    $("#jpgVerify").blur(function () {
        var yzm = $("#jpgVerify").val().trim();
        if (yzm == "" || yzm == null) {
            $("#jpgVerifys").text("");
            $("#jpgVerifys").append("<span style=color:#ff7800>图形验证不能为空</span>");
            txyzbln = false;
        } else {
            $.ajax({
                url: '[[@{/user/valid}]]',
                type: 'post',
                async: false,
                data: {code: yzm},
                dataType: 'json',
                success: function (data) {
                    if (data == 0) {
                        $("#jpgVerifys").text("");
                        $("#jpgVerifys").append("<span style=color:green>验证成功</span>");
                        txyzbln = true;
                    } else if (data == 1) {
                        $("#jpgVerifys").text("");
                        $("#jpgVerifys").append("<span style=color:#ff7800>验证码已失效，请重新输入</span>");
                        txyzbln = false;
                    } else if (data == 2) {
                        $("#jpgVerifys").text("");
                        $("#jpgVerifys").append("<span style=color:#ff7800>验证码错误</span>");
                        txyzbln = false;
                    } else if (data == 3) {
                        $("#jpgVerifys").text("");
                        $("#jpgVerifys").append("<span style=color:#ff7800>验证码已过期，重新获取</span>");
                        txyzbln = false;
                    }
                }
            });
        }
    });
    //验证手机号
    var phonebln = false;
    $("#phone").blur(function () {
        var phone = $("#phone").val().trim();
        if (phone == "" || phone == null) {
            $("#phoneJy").text("");
            $("#phoneJy").append("<span style=color:#ff7800>手机号不能为空</span>");
            phonebln = false;
        } else if (!/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(phone)) {
            $("#phoneJy").text("");
            $("#phoneJy").append("<span style=color:#ff7800>不是一个有效的手机号</span>");
            phonebln = false;
        } else {
            $.ajax({
                url: '[[@{/user/seluser}]]',
                type: 'post',
                async: false,
                data: {phone: phone},
                dataType: 'json',
                success: function (data) {
                    if (data == 1) {
                        $("#phoneJy").text("");
                        $("#phoneJy").append("<span style=color:#ff7800>手机号已注册，换一个吧！</span>");
                        phonebln = false;
                    } else if (data == 0) {
                        $("#phoneJy").text("");
                        $("#phoneJy").append("<span style=color:green>手机号可用</span>");
                        $("#sendPhone").attr("disabled", false).css("pointer-events", "auto");  //解禁获取手机验证码按钮
                        $('#sendPhone').css("background", "green");
                        phonebln = true;
                    }
                }
            });
        }
    });
    //验证新手机号验证码倒数方法定义
    var i = 60;
    let timer;  //实例一个属性来装setInterval定时器
    function times() {
        if (i == 0) {
            $('#sendPhone').attr("disabled", false).css("pointer-events", "auto");
            $("#sendPhone").html("重新获取");
            $('#sendPhone').css("background", "#EA524A");
            i = 60;
            clearInterval(timer);  //清空定时器
        } else {
            $('#sendPhone').attr("disabled", true).css("pointer-events", "none");  //禁用a标签
            $("#sendPhone").html("重新发送(" + i + ")");
            $('#sendPhone').css("background", "green");
            i = i - 1;
        }
    }

    //点击获取手机验证码按钮事件
    function hqsjyzm() {
        var phone = $("#phone").val().trim();
        if (phonebln) {
            $.ajax({
                url: '[[@{/user/dxyzm}]]',
                type: 'post',
                async: false,
                data: {phone: phone},
                dataType: 'json',
                success: function (data) {
                    layer.msg('短信验证码已发送到您的手机号中，请注意查收！', {
                        icon: 6
                    });
                }
            });
            timer = setInterval(times, 1000);
        }
    }
    //同意协议
    var probln = true;
    $("#protocol").blur(function () {
        var protocol = $("#protocol").get(0).checked;
        if (!protocol) {
            $("#protocolAlt").text("");
            $("#protocolAlt").append("<span style=color:#ff7800>请同意协议</span>");
            probln = false;
        } else {
            $("#protocolAlt").text("");
            probln = true;
        }
    });
    //验证短信验证码
    var phobln = false;
    $("#phonVerify").blur(function () {
        var phonVerify = $("#phonVerify").val().trim();
        if (phonVerify == "" || phonVerify == null) {
            $("#phonVerifys").text("");
            $("#phonVerifys").append("<span style=color:#ff7800>短信验证码不能为空</span>");
            phobln = false;
        } else {
            phobln = true;
        }
    });

    //点击下一步提交按钮
    function add() {
        var phonVerify = $("#phonVerify").val().trim();
        var userName = $("#userName").val().trim();
        var password = $password.val().trim();
        var email = $("#userEmail").val().trim();
        var phone = $("#phone").val().trim();
        var tname = $("#tname").val().trim();
        if (namebln && passbln && spassbln && emailbln && txyzbln && phonebln && probln && phobln) {
            if (tname != "" && tname != null) {  //推荐人不为空时
                $.ajax({
                    url: '[[@{/user/seluser}]]',
                    type: 'post',
                    async: false,
                    data: {name: tname},
                    dataType: 'json',
                    success: function (data) {
                        if (data == 0) {
                            $("#tnameAlt").text("");
                            $("#tnameAlt").append("<span style=color:#ff7800>用户不存在</span>");
                        } else if (data == 1) {
                            $("#tnameAlt").text("");
                            $("#tnameAlt").append("<span style=color:green>用户存在</span>");
                            $.ajax({
                                url: '[[@{/user/yzdxyzm}]]',
                                type: 'post',
                                async: false,
                                data: {code: phonVerify},
                                dataType: 'json',
                                success: function (data2) {
                                    if (data2 == 1) {  //验证码错误时
                                        $("#phonVerifys").text("");
                                        $("#phonVerifys").append("<span style=color:#ff7800>短信验证码错误</span>");
                                    } else if (data2 == 0) {
                                        location.href = "/erb/user/add?name=" + userName + "&password=" + password + "&email=" + email + "&phone=" + phone + "&tname=" + tname;
                                    }
                                }
                            });
                        }
                    }
                });
            } else {
                $.ajax({
                    url: '[[@{/user/yzdxyzm}]]',
                    type: 'post',
                    async: false,
                    data: {code: phonVerify},
                    dataType: 'json',
                    success: function (data3) {
                        if (data3 == 1) {  //验证码错误时
                            $("#phonVerifys").text("");
                            $("#phonVerifys").append("<span style=color:#ff7800>短信验证码错误</span>");
                        } else if (data3 == 0) {
                            location.href = "/erb/user/add?name=" + userName + "&password=" + password + "&email=" + email + "&phone=" + phone + "&tname=" + '';
                        }
                    }
                });
            }
        } else {
            layer.msg('请完善信息！', {
                icon: 5
            });
        }
    }
</script>
</body>
</html>
